<template>
    <div class="btn">
        <div class="div1">
            <p>共<span class="span1">{{getnum}}</span>
            件</p>
            
            <p>
            金额：<span class="span2">{{getprice}}</span>元
            </p>
            </div>
        <div @click='gochop' class="div2">继续购物</div>
        <div class="div3" @click='payment'>去结算</div>
    </div>
</template>

<script>
export default {
  
    data(){
        return{
            index:[],
            arr:[]
        }
    },
    mounted(){
        this.bus.$on('listcheck',(data1)=>{
            console.log(data1);
            this.index=data1;
        });
          this.bus.$on('listcheck',(data2)=>{
            console.log(data2);
            this.arr=data2;
          

        });
    },
    created(){
        console.log(this.$store.state.num)
    },
    methods:{
        gochop(){
            this.$router.push({name:'homepage'});
        },
        payment(){
            this.$router.push({name:'payment'})
        }
    },
    computed:{
        getprice(){
            let total=0;
           for(let i of this.index){
                console.log(this.$store.state.list[i].num)
                if(this.$store.state.list[i]){
                     total+=this.$store.state.list[i].num*this.$store.state.list[i].price;
                }
                   
               
            }
            return total;
        },

        getnum(){
            let n=0;
           for(let i of this.index){
               console.log(this.index)
                console.log(this.index[i])
                if(this.$store.state.list[i]){
                    n+=this.$store.state.list[i].num;
                }
            }
            return n;
        }
    },
}
</script>

<style lang='scss' scoped>
 $appwidth:375;


@function pxtovw($p){
    @return (100/$appwidth*$p) * 1vw;
}
.btn{
    width: 100%;
    z-index: 5;
    height: pxtovw(50);
    bottom:pxtovw(50);
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #777;
    .div1{
        width: 100%;
        height: 100%;
        flex: 1;
        background-color:#eee;
         text-align: center;
        color: #aaa;
        display: flex;
        flex-direction: column;
        font-size: pxtovw(14);
        .span1{
            color: orange;
        }
        .span2{
            color: orange;
        }
    }
    .div2{
        width: 100%;
        height: 100%;
        flex: 1;
        background-color:#ccc; 
        text-align: center;
        line-height: pxtovw(50);
        color: #333;
    }
    .div3{
        width: 100%;
        height: 100%;
        flex: 1;
        background-color:orange; 
        text-align: center;
        line-height: pxtovw(50);
        color: #fff;
    }

}

</style>
